<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <td>
                <input type="checkbox" id="checkboxbtn">
            </td>
            <td>#</td>
            <td>姓名</td>
            <td>昵称</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
            <td>操作</td>
        </thead>
        <tbody id="t">
            <!-- <tr>
                <td><input type="checkbox"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><button>X</button></td>
            </tr> -->
        </tbody>
    </table>
    <script src="data.js"></script>
    <script>
        function render(list) {
            t.innerHTML = list.map(function (item, index) {
                return `
            <tr class="trbox" idx="${index + 1}">
                <td><input type="checkbox" class="cbtn"></td>
                <td >${index + 1}</td>
                <td>${item.name}</td>
                <td>${item.nickname}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.hobby}</td>
                <td><button class="del">X</button></td>
            </tr>`
            }).join("")
        }

        // 渲染调用
        render(list)
        // 获取所有checkbox
        var cbtn = document.getElementsByClassName("cbtn")
        //全选的点击事件，根据点击的状态调用上面函数
        checkboxbtn.onclick = function () {
            if (checkboxbtn.checked) {
                // 如果为true，调用ff函数并把true作为实参传入
                ff(true);
            } else {
                ff(false)
            }
        }
        // 回调函数ff
        function ff(flag) {
            for (let i = 0; i < cbtn.length; i++) {
                cbtn[i].checked = flag;


                if (cbtn[i].checked == true) {
                    cbtn[i].parentNode.parentNode.style.backgroundColor = "yellow";
                } else {
                    cbtn[i].parentNode.parentNode.style.backgroundColor = "#fff";
                }
            }

        }


        // 点击tr任意单元格高亮并且勾选复选框
        var trbox = document.getElementsByClassName("trbox")
        for (let n = 0; n < trbox.length; n++) {
            trbox[n].onclick = function () {
                this.style.backgroundColor = "yellow"
                this.firstElementChild.firstElementChild.checked = true
                if (checkboxbtn.checked) {
                    // 如果为true，调用ff函数并把true作为实参传入
                    cb(true);
                } else {
                    cb(false)
                }

            }

        }


        // 给checkbox绑定点击事件高亮
        function cb() {
            for (var j = 0; j < cbtn.length; j++) {
                cbtn[j].onclick = function () {
                    if (this.checked == true) {
                        this.checked == false
                    }
                    if (this.checked == false) {
                        for (var k = 0; k < cbtn.length; k++) {
                            this.parentNode.parentNode.style.backgroundColor = "#fff"
                        }
                    }
                    else {
                        this.parentNode.parentNode.style.backgroundColor = "yellow"
                    }

                }
            }
        }



        checkboxbtn.onclick = function () {
            if (checkboxbtn.checked) {
                // 如果为true，调用ff函数并把true作为实参传入
                ff(true);
            } else {
                ff(false)
            }
        }
        // 回调函数ff
        function ff(flag) {
            for (let i = 0; i < cbtn.length; i++) {
                cbtn[i].checked = flag;


                if (cbtn[i].checked == true) {
                    cbtn[i].parentNode.parentNode.style.backgroundColor = "yellow";
                } else {
                    cbtn[i].parentNode.parentNode.style.backgroundColor = "#fff";
                }
            }

        }


        // 定义变量
        let $tr, $id
        // 删除事件
        var del = document.getElementsByClassName("del")
        t.onclick = function (e) {
            switch (e.target.className) {
                // 删除
                case "del":
                    $tr = e.target.parentNode.parentNode;
                    $id = $tr.getAttribute('idx');
                    list.forEach(function (item, index) {
                        // 利用遍历idx和id对比
                        if (index + 1 == $id) {
                            list.splice(index, 1)
                            render(list)
                        }
                    })
                    break

            }
        }


    </script>
</body>

</html>